<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <include file="./themes/default/portal/cssH.html"/>
    <style>
        .liimg {
            display: block;
            width: 100%;
        }

        .leftNav {
            margin-right: 21px;
        }

        .card {
            border-radius: 0;
            border: 0px solid;
            border-bottom: 1px solid #EBEEF5;
        }

        h3 {
            padding-bottom: 14px;
        }

        h3 + div {
            margin-bottom: 27px;
        }

        .c3 {
            color: #333;
        }

        .c9 {
            color: #999;
        }

        .c6 {
            color: #666;
        }

        .ce {
            color: #6884E3;
        }

        .txt {
            margin-top: 22px;
        }

        .txt img {
            width: 26px;
            height: auto;
        }

        .leftP {
            right: 0;
            top: 0;
        }

        .bg {
            top: 0;
            left: 0;
            width: 100%;
            height: 420px;
            /*background-image: url("../assets/img/bannner.png");*/
        }

        .borderLeft {
            height: 4px;
            width: 30px;
            background: #6884E3;
            border-radius: 4px;
            margin-top: 8px;
            margin-bottom: 31px;
        }

        .buttom {
            height: 40px;
            line-height: 40px;
            width: 130px;
            color: #fff;
            border-radius: 20px;
            background: #6884E3;
            margin-top: 47px;
            margin-bottom: 47px;
        }

        .borderBr {
            width: 78px;
            height: auto;
        }

        @media screen and (min-width: 950px) {
            .ul {
                width: 49%;
            }

            .list > div:nth-child(2n-1) {
                margin-right: 2%;
            }

            .flext {
                width: 31.33%;
                margin-bottom: 24px;
            }

            .flexx {
                flex: 1;
            }

            .li {
                box-sizing: border-box;
                width: 60%;
                padding: 24px;
            }

            .hover:hover div {
                border: 1px solid #fff;
            }

            .hover:hover {
                display: block;
                background-color: rgba(0, 0, 0, 0.3);
                color: #fff;
            }

            .subList > div:nth-child(3n-1) {
                margin-left: 24px;
                margin-right: 24px;
            }

            .swiper {
                width: 935px;
                height: 420px;
                position: relative;
            }
        }

        @media screen and (max-width: 950px) {
            .ul {
                display: block !important;
                width: 100%;
            }

            .flext {
                width: 45%;
            }

            .flexx {
                width: 50%;
            }

            .li {
                box-sizing: border-box;
                width: 100%;
                padding: 24px;
            }

            .subList > div {
                margin-bottom: 24px;
            }

            .subList > div:nth-child(2n) {
                margin-left: 24px;
            }

            .swiper {
                width: 100%;
                height: 143px;
                position: relative;
            }
        }

        .ul {
            background-color: #F9F9F9;
            margin-bottom: 42px;
        }

        .li > div {
            height: 30px;
            line-height: 30px;
        }

        .borderHr {
            height: 2px;
            width: 100%;
            background-color: #ccc;
            margin-bottom: 23px;
        }

        .borderHr > div {
            bottom: 0;
            width: 40px;
            height: 6px;
            background-color: #6884E3;
        }

        .hover {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: transparent;
        }

        .hover > div {
            width: 93px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
        }

        .box_list {
            width: 100%;
        }

        .box_list > div {
            width: 25%;
            display: inline-block;
        }

        .cl {
            line-height: 50px;
            margin-left: 10px;
        }

        .swiper {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            width: 100%;
            height: 100%;
            background-size: cover;
        }

        .text3 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="web">
    <include file="./themes/default/portal/phone.html"/>
    <!--  头  -->
    <div id="app">
        <include file="./themes/default/portal/header.html"/>


        <!--  内容  -->
        <div class="content">
            <div class="flex">
                <!--   侧边导航   -->
                <div class="leftNav flex-sub dnAndb">
                    <el-card shadow="never" class="card f18"
                             style="background: #6884E3;color: #fff;border-bottom: 0px solid;">
                        服务内容
                    </el-card>
                    <el-card shadow="hover" class="card">
                        <div class="flex f16 c3" @click="goPage(0)">
                            <div class="flex-sub">小程序开发</div>
                            <div class="el-icon-arrow-right"></div>
                        </div>
                        <div class="f12 c9" @click="goPage(0)">定制开发&nbsp;&nbsp;&nbsp;速成模板</div>
                    </el-card>
                    <el-card shadow="hover" class="card">
                        <div class="flex f16 c3" @click="goPage(2)">
                            <div class="flex-sub">公众号开发</div>
                            <div class="el-icon-arrow-right"></div>
                        </div>
                        <div class="f12 c9" @click="goPage(2)">定制开发&nbsp;&nbsp;&nbsp;速成模板</div>
                    </el-card>
                    <el-card shadow="hover" class="card">
                        <div class="flex f16 c3" @click="goPage(1)">
                            <div class="flex-sub">APP开发</div>
                            <div class="el-icon-arrow-right"></div>
                        </div>
                        <div class="f12 c9" @click="goPage(1)">iOS原生&nbsp;&nbsp;&nbsp;Android原生</div>
                    </el-card>
                    <el-card shadow="hover" class="card">
                        <div class="flex f16 c3" @click="goPage(3)">
                            <div class="flex-sub">网站建设</div>
                            <div class="el-icon-arrow-right"></div>
                        </div>
                        <div class="f12 c9" @click="goPage(3)">定制PC/wap&nbsp;&nbsp;&nbsp;精美模板&nbsp;&nbsp;&nbsp;响应式</div>
                    </el-card>
                </div>

                <!--   轮播图   -->
                <div class="flex swiper">
                    <!-- Swiper -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide pa" v-for="(item,index) in navimg"
                                 :style="'width: 100%;height:100%;top:0;left:0;background-image: url('+item.image+');background-size:coverbackground-repeat: no-repeat;'">
                                <div class="pa"></div>
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination swiper-pagination-white"></div>
                        <!-- Add Navigation -->
                        <div class="swiper-button-prev swiper-button-white dnAndb"></div>
                        <div class="swiper-button-next swiper-button-white dnAndb"></div>
                    </div>

                </div>
            </div>
            <div style="height: 25px;"></div>

            <!--  手机的导航图  -->
            <div class="flex-sub db">
                <div class="tc f18">
                    服务内容
                    <div class="flex flex-align">
                        <div class="borderLeft" style="margin-bottom: 10px"></div>
                    </div>
                </div>
                <div class="box_list">
                    <div v-for="(item, index) in navList1" :key="index" class="tc"
                         @click="goPage(index)">
                        <div class="flex flex-align"><img style="width: 50px; height: auto" :src="item.img" alt="">
                        </div>
                        <h2 class="f12 tc">{{item.title}}</h2>
                    </div>
                </div>
            </div>
            <div style="height: 78px"></div>

            <!--  看见梧桐树   -->
            <div class="flex wow bounceInDown">
                <div class="flex-sub pr">
                    <div>
                        <div class="f28 pr flex" style="z-index: 10">看见梧桐树
                            <div class="f16 cl dnAndb">ABOUT US</div>
                        </div>
                        <div class="borderLeft pr" style="z-index: 10"></div>
                    </div>
                    <div class="c6 f16 pr text3" style="z-index: 10">
                        {{seeDetail.desc}}
                    </div>
                    <div>
                        <div class="buttom tc f14 pr" @click="navigatorFun(1)" style="z-index: 10">了解更多
                        </div>
                    </div>
                    <img class="pa leftP" height="260px" src="__STATIC__/demo/img/bg0.png" alt="">
                </div>
                <div><img class="pr" style="z-index: 10" height="260px" :src="seeDetail.image" alt=""></div>
            </div>
            <div style="height: 59px;"></div>
            <div class="flex wow wobble num">
                <div class="flex-sub dnAndb"></div>
                <div class="flex-sub tc">
                    <h1 class="ce">{{num}}+</h1>
                    <div class="flex flex-align txt c3"><img src="__STATIC__/demo/img/nav1.png" alt=""> 服务行业</div>
                </div>
                <div class="flex-sub tc">
                    <h1 class="ce">{{num1}}+</h1>
                    <div class="flex flex-align txt c3"><img src="__STATIC__/demo/img/nav2.png" alt=""> 战略伙伴</div>
                </div>
                <div class="flex-sub tc">
                    <h1 class="ce">{{num2}}+</h1>
                    <div class="flex flex-align txt c3"><img src="__STATIC__/demo/img/nav3.png" alt=""> 服务客户</div>
                </div>
                <div class="flex-sub dnAndb"></div>
            </div>
            <div style="height: 80px;"></div>

            <!-- 看清梧桐树 -->
            <div class="wow bounceInRight">
                <div class="">
                    <div class="flex">
                        <div class="flex-sub">
                            <div class="f28 pr flex" style="z-index: 10">看清梧桐树
                                <div class="cl f16 dnAndb">KNOW ME</div>
                            </div>
                            <div class="borderLeft pr" style="z-index: 10"></div>
                        </div>
                        <div class="f6 c6" @click="navigatorFun(2)">了解更多 <i
                                class="el-icon-arrow-right ce"></i>
                        </div>
                    </div>
                </div>
                <div class="flex list">
                    <div v-for="(item,index) in clearly" :key="index" class="ul flex"  @click="goPage(6, item)">
                        <div class="li">
                            <div class="f16 c3 sub-1">{{item.title}}</div>
                            <div class="f16 c3 sub-1">{{item.desc}}</div>
                            <!--<div class="f16 c3 sub-1">{{item.content}}</div>-->
                        </div>
                        <div class="flex-sub">
                            <img :src="item.image" class="liimg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 59px;"></div>

            <!--  选择梧桐树  -->
            <div class="wow bounceInLeft">
                <div class="">
                    <div class="flex">
                        <div class="flex-sub">
                            <div class="f28 pr flex" style="z-index: 10">选择梧桐树
                                <div class="f16 cl dnAndb">CHOSSE ME</div>
                            </div>
                            <div class="borderLeft pr" style="z-index: 10"></div>
                        </div>
                        <!--          <div class="f6 c6" @click="goPage()">了解更多 <i class="el-icon-arrow-right ce"></i></div>-->
                    </div>
                </div>
                <div class="flex">
                    <el-card shadow="hover" v-for="(item, index) in card" :key="index" style="border: 0px;"
                             class="flexx">
                        <div class="tc">
                            <div class="flex flex-align"><img style="width:80px;" :src="item.image" alt=""></div>
                            <h3 class="f20">{{item.title}}</h3>
                            <div class="f14 c6">{{item.desc}}</div>
                        </div>
                        <div class="pr borderHr flex flex-align flex-center">
                            <div class=""></div>
                        </div>
                        <div class="c9 f12">{{item.content}}</div>
                    </el-card>
                </div>
            </div>
            <div style="height: 59px;"></div>

            <!--  看懂梧桐树  -->
            <div class="wow bounceInUp">
                <div class="">
                    <div class="flex">
                        <div class="flex-sub">
                            <div class="f28 pr flex" style="z-index: 10">看懂梧桐树
                                <div class="f16 cl dnAndb">UNDERSRSND ME</div>
                            </div>
                            <div class="borderLeft pr" style="z-index: 10"></div>
                        </div>
                        <div class="f6 c6" @click="navigatorFun(3)">查看更多案例 <i
                                class="el-icon-arrow-right ce"></i>
                        </div>
                    </div>
                </div>
                <div class="flex subList">
                    <el-card class="flext" :body-style="{ padding: '0px' }" :key="index"
                             v-for="(item,index) in cardList">
                        <div class="flex flex-align pr"><img :src="item.image" class="liimg">
                            <div class="pa hover flex flex-align flex-center">
                                <div class="tc f12" @click="goPage(5,item)">查看项目</div>
                            </div>
                        </div>
                        <div style="padding: 14px;" class="tc">
                            <div class="c3 f20 tc">{{item.title}}</div>
                            <div class="flex flex-align"><img class="borderBr" src="__STATIC__/demo/img/bg1.png" alt="">
                            </div>
                            <div class="c6 tc f16">{{item.service_area}}</div>
                        </div>
                    </el-card>
                </div>
            </div>
            <div style="height: 59px;"></div>

            <!--  凤栖梧桐
          -->
        </div>
    </div>
    <!--  尾  -->
    <include file="./themes/default/portal/footer.html"/>
    <input type="hidden" name="slideList" value='{$info}' id="slideList">
    <script>
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true,
            callback: function (box) {
                var arr = box.className.split(' ')
                if (arr.indexOf('num') != -1) {
                    var time, time1, time2
                    time = setInterval(function () {
                        if (app.num == app.numList[0]) {
                            clearInterval(time)
                        } else {
                            app.num++
                        }
                    }, 20)
                    time1 = setInterval(function () {
                        if (app.num1 == app.numList[1]) {
                            clearInterval(time1)
                        } else {
                            app.num1++
                        }
                    }, 100)
                    time2 = setInterval(function () {
                        if (app.num2 == app.numList[2]) {
                            clearInterval(time2)
                        } else {
                            app.num2++
                        }
                    }, 5)
                }
            }
        });
        wow.init()
        var app = new Vue({
            el: '#web',
            data: {
                num: 1,
                num1: 1,
                num2: 1,
                //服务行业、战略伙伴、服务客户
                numList: [100, 20, 500],
                show: false,
                navIndex: 0,
                navList: [{title: '网站首页', name: 'main', nav: []}, {title: '看见梧桐树', name: 'see', nav: []}, {
                    title: '看清梧桐树',
                    name: 'clearly',
                    nav: []
                }, {title: '看懂梧桐树', name: 'caseList', nav: []}, {title: '凤栖梧桐', name: 'contact', nav: []}],
                navLists: [
                    {title: '网站首页', name: 'main', nav: []},
                    {title: '看见梧桐树', name: 'see', nav: ['企业简介', '关于我们']},
                    {title: '看清梧桐树', name: 'clearly', nav: ['新闻资讯']},
                    {title: '看懂梧桐树', name: 'caseList', nav: ['小程序开发', '公众号开发', 'APP开发', '品牌网站']},
                    {title: '凤栖梧桐', name: 'contact', nav: ['品牌网站']}],

                navimg: [],

                // 看见梧桐树描述
                seeDetail: {
                    image: '__STATIC__/demo/img/see1.png',
                    desc: '梧桐树（天津）网络技术有限公司是一家具有十年以上开发经验和服务经验的互联网公司，从事网站建设，app开发，微信和小程序开发方面的业务，具有专业的开发人才和客服团队，在互联网＋应用大潮推动下，真正倾听并解决客户的真正诉求，结合线上线下营销、实际运营经验等，打造企业专属的互联网应用方案，解决企业痛点，助力企业快速发展！',
                },

                clearly: [],
                card: [
                    {
                        img: '/static/img/p2.png',
                        title: '设计优势',
                        dese: '专属定制，独一无二',
                        content: '精准品牌定位，结合您的行业、产品或服务优势，结合互动营销经验，整体布局规划，局部细节修饰，个性化量身设计，和谐统一'
                    },
                    {
                        img: '/static/img/p3.png',
                        title: '开发优势',
                        dese: '架构稳健',
                        content: '十年＋市场营销经验，运维经验沉淀，以您项目长远发展为最终目标，整体把控项目实际运作情况与迭代可行性，给与中肯意见，做好一切配合工作'
                    },
                    {
                        img: '/static/img/p4.png',
                        title: '服务优势',
                        dese: '真诚待客，互助共赢',
                        content: '十年＋市场营销经验，运维经验沉淀，以您项目长远发展为最终目标，整体把控项目实际运作情况与迭代可行性，给与中肯意见，做好一切配合工作'
                    },
                    {
                        img: '/static/img/p5.png',
                        title: '运营优势',
                        dese: '专属定制，独一无二',
                        content: '项目筹划到具体落实都有专业的运营人员配合，为您提供一站式服务'
                    },
                ],

                cardList: [],
                // 手机端导航列表
                navList1: [
                    {
                        img: '/static/demo/img/nav7.png',
                        title: '小程序开发',
                        name: 'program'
                    },
                    {
                        img: '/static/demo/img/nav4.png',
                        title: 'APP开发',
                        name: 'development'
                    },
                    {
                        img: '/static/demo/img/nav6.png',
                        title: '公众号开发',
                        name: 'publicNumber'
                    },
                    {
                        img: '/static/demo/img/nav5.png',
                        title: 'PC/WAP建站',
                        name: 'build'
                    }
                ]
            },
            mounted: function () {
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    loop: true,
                    speed: 600,
                    autoplay: 3000,
                });
            },
            created: function () {
                var slideList = document.getElementById('slideList').value;
                var resSlideList = JSON.parse(slideList);
                this.navimg = resSlideList.slideList
                this.clearly = resSlideList.clearlyList
                this.cardList = resSlideList.caseList
            },
            methods: {
                goPage: function (index, item) {
//        item  标题
                    switch (index) {
                        case 0:
                            window.location.href = "{:url('index/program')}?cate_id=3"
                            break
                        case 1:
                            window.location.href = "{:url('index/development')}?cate_id=6"
                            break
                        case 2:
                            window.location.href = "{:url('index/publicNumber')}?cate_id=5"
                            break
                        case 3:
                            window.location.href = "{:url('index/build')}?cate_id=7"
                            break
                        case 5:
                            if (item.url) {
                                console.log(item)
                                window.location.href = item.url
                                return
                            }
                            window.location.href = "{:url('index/caseDetail')}?id=" + item.id + "&name=" + item.title
                            break
                        case 6:
                            window.location.href = "{:url('index/detail')}?id=" + item.id + "&name=" + item.title
                            break
                    }
                },
//      导航的跳转
                navigatorFun: function (index) {
                    switch (index) {
                        case 0:
                            window.location.href = "{:url('index/index')}"
                            break
                        case 1:
                            window.location.href = "{:url('index/see')}"
                            break
                        case 2:
                            window.location.href = "{:url('index/clearly')}"
                            break
                        case 3:
                            window.location.href = "{:url('index/caseList')}"
                            break
                        case 4:
                            window.location.href = "{:url('index/contact')}"
                            break
                    }
                }
            }
        })
    </script>
</html>
